<template>
<div>
   <!-- 面包屑 -->
  <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/welcome' }"><span>首页</span></el-breadcrumb-item>
  <!-- <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> -->
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片区域 -->
<el-card >
  <el-row>
    <el-col >
      <el-button type="primary" @click="addUsersBtn">添加分类</el-button>
    </el-col>
  </el-row>

  <!-- 表格 -->
  <tree-table class="treeTable" :data="cateList" :columns="columns" :stripe="true" :show-index="true" :selection-type="false" :expand-type="false" index-text="#">
    <!-- 是否有效模板 -->
    <template slot-scope="data" slot="isok">
      <i class="el-icon-success" style="color: lightgreen" v-if="data.row.cat_deleted == true"></i>
      <i class="el-icon-error" style="color: red" v-if="data.row.cat_deleted == false"></i>
    </template>
    <!-- 排序模板 -->
    <template slot-scope="data" slot="order">
      <el-tag v-if="data.row.cat_level === 0" size="small"  effect="dark">一级</el-tag>
      <el-tag v-else-if="data.row.cat_level === 1" type="success" size="small"  effect="dark">二级</el-tag>
      <el-tag v-else type="warning" size="small"  effect="dark">三级</el-tag>
    </template>
    <template slot-scope="data" slot="cao">
        <div class="bt">
          <el-button type="primary" size="mini"  icon="el-icon-edit"  @click="index(data.row.cat_id)">修改</el-button>
        <el-button type="danger"   size="mini"  icon="el-icon-delete"  @click="del(data.row.cat_id)">删除</el-button>
        </div>
        </template>
  </tree-table>
  <!-- 分页 -->
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加分类对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="50%" @close="closeaddDialogVisible">
      <el-form ref="addCateFormRef" :model="addCateForm" label-width="100px" :rules="addCateRules">
      <el-form-item label="分类名称:" prop="cat_name">
        <el-input v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类:" >
        <el-cascader
        v-model="catId"
        :options="ParentRolesList"
        :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children'}"
        @change="ParentRolesChange" clearable change-on-select ></el-cascader>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateFormUrl">确 定</el-button>
      </span>
    </el-dialog>
</el-card >
  </div>
</template>

<script>
export default {
  data () {
    return {
      params: { // 分页效果
        type: 3, // 获取第几层的分类
        pagenum: 1, // 当前处于的页码
        pagesize: 5 // 当前一页显示几条
      },
      total: 0, // 总数据条数
      cateList: [], // 分类列表数据
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'isok'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'cao'
        }
      ],
      addDialogVisible: false, // 增加分类对话框
      setDialogVisible: false, // 修改分类对话框
      addCateForm: { // 添加用户对象信息
        cat_pid: 0,
        cat_name: '', // 分类名称
        cat_level: 0
      },
      addCateRules: { // 分类添加校验规则
        cat_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      },
      catId: 0, // 保存添加分类sele下拉框
      ParentRolesList: [] // 下拉框中的父级分类
    }
  },
  created () {
    this.getCateList()
  },
  mounted () {
    // console.log('dsad')
  },
  methods: {
    async getCateList () { // 获取全部商品分类信息
      console.log(11, this.params.pagenum)
      const { data: res } = await this.$http.get('categories', { params: this.params })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.cateList = res.data.result
      this.total = res.data.total
      // this.params.pagesize = res.data.pagesize
    },
    addUsersBtn () { // 点击弹出新增弹窗
      this.addDialogVisible = true
      this.getParentRolesList()
    },
    handleSizeChange (newSize) { // 改变页面展示几条数据下拉框
      this.params.pagesize = newSize
      this.getCateList()
    },
    handleCurrentChange (newNum) { // 改变页码
      this.params.pagenum = newNum
      this.getCateList()
    },
    closeaddDialogVisible () { // 关闭新增对话框，重置表单
      this.$refs.addCateFormRef.resetFields()
      this.catId = ''
    },
    async addCateFormUrl () { // 点击添加框中的确定按钮
      const { data: res } = await this.$http.post('categories', this.addCateForm)
      if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      // this.params.pagenum = Math.ceil((this.total + 1) / this.params.pagesize)
      // console.log(22, this.params.pagenum)
      this.getCateList()
      window.setTimeout(() => {
        this.params.pagenum = Math.ceil((this.total + 1) / this.params.pagesize)
        this.addDialogVisible = false
      }, 200)
      // this.params.pagenum = Math.ceil(this.total / this.params.pagesize)
      // console.log(Math.ceil(this.total / this.params.pagesize))
      // console.log(33, Math.ceil((this.total + 1) / this.params.pagesize))
    },
    async getParentRolesList () { // 获取select下拉数据
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.ParentRolesList = res.data
    },
    ParentRolesChange () { // 添加分类下拉框发生变化,获取当前处于哪一层级，做出相应的改变
      // if (this.catId.length > 0) {
      //   this.addCateForm.cat_pid = this.catId[this.catId.length - 1] // 永远拿到最近的父级id 数组中第一个为一级id,第二个为二级id,当选中两级时，应达到二级id
      //   this.cat_level = this.catId.length // `0`表示一级分类；`1`表示二级分类；`2`表示三级分类
      // } else {
      //   this.addCateForm.cat_pid = 0 // select下拉框为空表示要添加一级分类，为0
      //   this.cat_level = 0
      // }
      this.addCateForm.cat_pid = this.catId.length > 0 ? this.catId[this.catId.length - 1] : 0
      this.addCateForm.cat_level = this.catId.length
    }
  }
}
</script>

<style lang="less" scoped>
.treeTable {
  margin: 20px 0;
}
</style>
